<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            font-size: 16px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        header{
            height: 60px;
            border-bottom: 1px solid #cccccc;
            position: relative;
        }
        header>p{
          line-height: 60px;
          text-align: center;
        }
        .icon{
            position: absolute;
            top:19px;
            right: 10px;
        }
        li{
            list-style: none;
            display: flex;
            height: 60px;
            align-items: center;
            padding: 0 10px;
        }
        ul>li>img{
            /**圆角*/
            border-radius: 5px;
        }
        ul>li>section{
            /*section独占一行，而图片固定位置*/
            flex: 1;
            height: 100%;
            border-bottom: 1px solid #cccccc;
            margin-left: 10px;
            display: flex;
        }
        ul>li>section>.message{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        ul>li>section>.message>.name{
            font-weight:700;
        }
        ul>li>section>.message>.lats-message{
            font-size: 0.75rem;
            color: #a1a1a1;
        }
        ul>li>section>.time{
            font-size: 0.75rem;
            color: #a1a1a1;
            padding-top: 10px;
        }
    </style>
</head>
<body>
  <div >
      <header>
          <p class="title">微信</p>
          <div class="icon">
              <img src="../img/fangdajing.svg">
              <img src="../img/jiahao.svg">
          </div>
      </header>
      <div class="message">
          <ul>
              <li>
                  <img  width="40" height="40" src="../img/feiyy.jpg">
                  <section>
                    <section class="message">
                     <p class="name">舔狗沸羊羊</p>
                     <p class="lats-message">我最喜欢美羊羊</p>
                    </section>
                    <section class="time">
                        上午9：30
                    </section>
                  </section>
              </li>
              <li>
                  <img  width="40" height="40" src="../img/shuangmiangui.jpg">
                  <section>
                      <section class="message">
                          <p class="name">舔狗双面龟</p>
                          <p class="lats-message">我！爱！小！美！美！</p>
                      </section>
                      <section class="time">
                          上午4：30
                      </section>
                  </section>
              </li>
              <li>
                  <img  width="40" height="40" src="../img/mao.png">
                  <section>
                      <section class="message">
                          <p class="name">舔狗汤姆</p>
                          <p class="lats-message">哟吼！</p>
                      </section>
                      <section class="time">
                          上午6：30
                      </section>
                  </section>
              </li>
              <li>
                  <img  width="40" height="40" src="../img/GGbond.jpg">
                  <section>
                      <section class="message">
                          <p class="name">舔狗GGbond</p>
                          <p class="lats-message">菲菲公主是我的！</p>
                      </section>
                      <section class="time">
                          上午10：30
                      </section>
                  </section>
              </li>
          </ul>
      </div>
  </div>
</body>
</html>